<!doctype html>
<html>
<head>
	<title>Filtering</title>
	<meta  name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

	<script src="../../codebase/webix/webix.js" type="text/javascript"></script>
	<script src="../../codebase/kanban.js" type="text/javascript"></script>

	<link rel="stylesheet" type="text/css" href="../../codebase/webix/webix.css">
	<link rel="stylesheet" type="text/css" href="../../codebase/kanban.css">

	<script src="../common/data.js"></script>
	<script src="../common/types.js"></script>
	<link rel="stylesheet" type="text/css" href="../common/style.css">

	<style>
		.toolbar{
			background-color: #f8f8f8;
		}
		.shadow{
			box-shadow: inset 0 1px 3px #aaa;
		}
	</style>
</head>
<body>
<script type="text/javascript">



	function reset(){
		$$("myBoard").filter("","");
		$$("staffList").unselect();
	}

	webix.ready(function(){
		webix.ui({
			rows:[
				{
					css: "toolbar",
					borderless: true,
					paddingY:7,
					paddingX:10,
					margin: 7,
					cols:[
						{ view: "label", label: "Choose a person to see assigned tasks"}
					]
				},
				{
					css: "shadow",
					type:"space",
					borderless: true,
					cols:[
						{
							type: "form",
							rows:[

								{
									id: "staffList",
									view: "dataview",
									xCount: 3,
									autoheight: true,
									borderless: true,
									css: "members",
									select: true,
									type:"avatars",
									on:{
										onItemClick: function(id){
											$$("myBoard").filter("#personId#",id);
										}
									},
									data: staff
								},
								{
									view: "button", type: "form", label: "Reset filter", click: reset
								},
								{ }
							]

						},
						{
							view:"kanban",
							id: "myBoard",
							type: "wide",
							cols:[
								{ header:"Backlog",
									body:{ view:"kanbanlist", status:"new", type: "avatars"}},
								{ header:"In Progress",
									body:{ view:"kanbanlist", status:"work", type: "avatars"}
								},
								{ header:"Testing",
									body:{ view:"kanbanlist", status:"test", type: "avatars"}},
								{ header:"Done",
									body:{ view:"kanbanlist", status:"done", type: "avatars"}}
							],
							data:base_task_set
						}
					]
				}

			]
		});

	});
</script>
</body>
</html>